---
title: <ActionBar.Action>
---

import { PuckPreview } from "@/docs/components/Preview";
import { ActionBar } from "@/puck";

# \<ActionBar.Action\>

Render an action button in the [`<ActionBar>`](action-bar). Often used inside an [`<ActionBar.Group>`](action-bar-group).

```tsx showLineNumbers {2} copy
<ActionBar>
  <ActionBar.Action onClick={() => console.log("Clicked!")}>★</ActionBar.Action>
</ActionBar>
```

<PuckPreview>
  <div style={{ display: "flex" }}>
    <ActionBar>
      <ActionBar.Action onClick={() => console.log("Clicked!")}>
        ★
      </ActionBar.Action>
    </ActionBar>
  </div>
</PuckPreview>

## Props

| Prop                    | Example      | Type      | Status   |
| ----------------------- | ------------ | --------- | -------- |
| [`children`](#children) | `<svg />`    | ReactNode | Required |
| [`onClick`](#on-clicke) | `() => void` | Function  | -        |
| [`label`](#label)       | `"Label"`    | String    | -        |

## Required Props

### `children`

A node to render as the children of the action. Should be a string or an icon.

Puck uses [Lucide icons](https://lucide.dev/icons/). You can use [lucide-react](https://lucide.dev/guide/packages/lucide-react) to choose a similar icon, if desired.

### `onClick(e)`

An [onClick callback](https://react.dev/learn/responding-to-events) triggered when the user clicks the action.

## Optional Props

### `label`

A label to provide an accessible label when using icon.
